<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>入门，创建自带场景与几何体</title>
		<style>
			body{
				margin: 0;
				overflow: hidden; 
				/* 隐藏body窗口区域滚动条 */
			}
		</style>
		<!-- 引入three.js -->
		<script src='three_r102/build/three.js'></script>
		<script src='three_r102/examples/js/controls/OrbitControls.js'></script>
	</head>
	<body>
		<script>
			//创建场景
			var scene = new THREE.Scene();
			// //创建网格模型
			// var geometry = new THREE.BoxGeometry(100,100,100); //创建几何体
			// var material = new THREE.MeshLambertMaterial({color:0x0000ff}); //创建材质
			// var mesh = new THREE.Mesh(geometry,material);//网格模型对象生成Mesh
			// scene.add(mesh);
			
			// //多加几个物体
			// var geo2= new THREE.SphereGeometry(60,40,40);
			// // var mat2= new THREE.MeshLambertMaterial({color:0xff00ff,
			// // 										 opacity:0.7,
			// // 										 transparent:true});
			// var mat2=new THREE.MeshPhongMaterial({
			// 	color:0x0000ff,
			// 	specular:0x4488ee,
			// 	shininess:12
			// });//材质对象
			
			// var mesh2=new THREE.Mesh(geo2,mat2);
			// mesh2.position.set(120,0,0);
			// scene.add(mesh2);
			
			//使用顶点创建Mesh
			var geo = new THREE.BufferGeometry();
			var vertices =new Float32Array([
				0, 0, 0, //顶点1坐标
				50, 0, 0, //顶点2坐标
				0, 100, 0, //顶点3坐标
				0, 0, 10, //顶点4坐标
				0, 0, 100, //顶点5坐标
				50, 0, 10, //顶点6坐标
			]);
			var attr = new THREE.BufferAttribute(vertices,3); //3个一组，表示xyz坐标
			geo.attributes.position =attr;
			
			var mat = new THREE.MeshBasicMaterial({
				color:0x0000ff,
				side:THREE.DoubleSide //两面可见
			});
			var mesh =new THREE.Mesh(geo,mat);
			scene.add(mesh);
			
			//
			
			
			
			
			//添加辅助三维坐标系AxesHelper
			var axe= new THREE.AxesHelper(250);
			scene.add(axe);
			
			//灯光
			var point =new THREE.PointLight(0xffffff);
			point.position.set(400,200,300); 
			scene.add(point);
			
			//环境光
			var ambient = new THREE.AmbientLight(0x444444);
			scene.add(ambient);
			
			//相机设置
			var width =window.innerWidth; //窗口宽度
			var height = window.innerHeight; //窗口高度
			var k =width/height; //窗口宽高比
			var s =200; //三维场景显示范围控制系数，系数越大，显示范围越大
			
			//创建相机
			var camera =new THREE.OrthographicCamera(-s*k,s*k,s,-s,1,1000);
			camera.position.set(200,300,200);
			camera.lookAt(scene.position);//指向场景对象
			
			//创建渲染器
			var renderer= new THREE.WebGLRenderer() ;
			renderer.setSize(width,height);
			renderer.setClearColor(0xb9d3ff,1);
			document.body.appendChild(renderer.domElement); //body元素中插入canvas对象。
			
		
			
			
			
			function render() {//添加动画
			        renderer.render(scene,camera);//执行渲染操作
			        mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
			        requestAnimationFrame(render);//请求再次执行渲染函数render，有点类似递归啊
			    }
			render();
			
			var controls = new THREE.OrbitControls(camera); //添加鼠标操控
			
			
		</script>
	</body>
</html>
